<template>
    <p style="line-height: 50px;font-size: 16px;font-weight: bold;" class="main_text">审核流程设置</p>
    <div class="main">
        <!-- ############################################## 查询 ############################################## -->
        <div class="top mb20 p20">
            <div class="containerBox" style="position: relative;">
                <div id="container" style="width: calc(100vw - 750px); height: calc(100vh - 150px)">
                </div>
                <div id="js-properties-panel" class="panel"></div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
// 引入汉化js
import translate from '@/assets/bpmn/translate.js'


import { onMounted, markRaw } from 'vue';

// bpmn-js相关

import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

import BpmnModeler from 'bpmn-js/lib/Modeler';

// bpmn-js-properties-panel相关

import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'

import propertiesPanelModule from 'bpmn-js-properties-panel'

import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
// import propertiesProviderModule from '../../../../node_modules/bpmn-js-properties-panel/lib/provider/camunda'

// import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import camundaModdleDescriptor from '../../../../node_modules/camunda-bpmn-moddle/resources/camunda.json'


onMounted(() => {
    var customTranslateModule = {
        translate: ['value', translate]
    }
    const containerEl = document.getElementById('container');
    const bpmnModeler = markRaw(new BpmnModeler({
        container: containerEl,
        // 添加控制板
        propertiesPanel: {
            parent: '#js-properties-panel'
        },
        // 右侧属性面板
        additionalModules: [
            propertiesPanelModule,
            propertiesProviderModule,
            customTranslateModule
        ],
        moddleExtensions: {
            camunda: camundaModdleDescriptor
        }
    }));
    bpmnModeler.createDiagram(() => {
        bpmnModeler.get('canvas').zoom('fit-viewport');
    });
})
</script>

<style scoped lang="scss">
.main {
    width: 100%;

    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

.containerBox {
    height: calc(100vh - 250px);
    margin-top: 30px;
}

.containerBox #container {
    height: calc(100vh - 250px);
    border: 1px solid rgb(121, 121, 121);
}

.bpp-properties-panel [type=text] {
    box-sizing: border-box;
}

::v-deep .djs-container {
    height: calc(100vh - 260px) !important;
}

#container {
    width: 100% !important;
    height: calc(100vh - 250px) !important;
}

#js-properties-panel {
    height: calc(100vh - 252px) !important;
}

::v-deep.djs-palette {
    height: calc(100vh - 250px) !important;
}

.panel {
    width: 400px;
    position: absolute;
    top: 1px;
    right: 1px;
    height: 100%;
    overflow: auto;
}

/* 右下角logo */
.bjs-powered-by {
    display: none;
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }

    .el-form {
        .el-icon svg {
            color: #dcdfe6;
        }

    }
}
</style>
